<template>
	<rootWithStateBarLayout :rightToolBarData="toolDataList" @onToolItemClick="onToolItemClick"
		:rightToolBarBgColor="toolBarBgColor">

		<view slot="pageContent" class="content-lay flex-v">
			<view class="header flex-h">
				<view style="display: flex; flex-direction: row">
					<view class="header-name-lay flex-h">
						<text class="header-name">{{
							selectInfo ? (selectInfo.plt_name + ' - ' + selectInfo.macTypeStr ) : "机器名称"
						  }}</text>
					</view>
					<view class="header-indexs flex-h">
						<view class="header-index-tip">{{$t("thickIndex.thickTableHead.macNumb")}}：</view>
						<view class="header-name-lay header-name-lay-disabled flex-h">
							<text class="header-name">{{selectTableData ? selectTableData.mac_numb : ""}}</text>
						</view>
					</view>
					<view class="header-count">{{$t("thickIndex.macSum")}}：{{getCount}}</view>
				</view>
				<view class="header-time">{{ currentTimeStr }}</view>
			</view>

			<view class="main-content-lay flex-v">
				<view class="user-lay flex-h">
					<view class="user-person">{{$t("thickIndex.checker")}}：{{userInfo ? userInfo.txt_value : '--'}}
					</view>
					<visualListSelectBtn :showText="$t('thickIndex.macSelect')" :originListData="tableOrignData"
						@onSelectPopupShow="showDrawLay = false" @updateByScreen="screenTableShowState">
					</visualListSelectBtn>
				</view>

				<view class="table-lay">
					<vTable class="data-table" ref="table" :columns="tableHeadData" :list="tableContentData"
						selection="single" @on-selection-change="onTableSelect" :height="tableHeight" :td-height="40"
						:th-td-height="40" border-color="#00ff00" :slot-cols="['checkSign']" rowClassName="rowClassName">
						<template v-slot="{row}">
							<view
								:style="'display: flex;flex-direction: row;justify-content: center;align-items: center;width:100%;height:100%;font-size: 14rpx;color: #666666;background-color:' + row.backgroundColor ">
								{{row.checkSign}}</view>
						</template>
					</vTable>
				</view>
			</view>

		</view>

		<view slot="popupContent">
			<view v-if="showDrawLay" id="drawingShowLay" class="drawingShowLay"
				:style="'height:' + (tableHeight) + 'px'">
				<drawingBasicFun @onDrawCloseClick="showDrawLay = false" :ballMarkData="showDrawBallData"
					:svgOption="selectSvgData"></drawingBasicFun>
			</view>
		</view>
	</rootWithStateBarLayout>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";

	import {
		requireVisualListData,
		genVisualListPlanState
	} from "@/localService/visualService.js";

	import {
		genLocalDrawPath
	} from "@/localService/index.js";

	import {
		requireMarkupBallData
	} from "@/localService/markupService.js";

	import dateUtil from "@/utils/date.js";
	import selectData from "@/common/visual_index_data.js";
	import drawingBasicFun from "@/_components/drawing/drawingBasicFun.vue";
	import hqsPopup from "@/components/hqs-popup/hqs-popup";
	import screenContent from "@/pages/thickness/_components/screenContent.vue";
	import vTable from "@/components/table.vue";

	import rootWithStateBarLayout from "@/_components/rootWithStateBarLayout.vue";
	import visualListSelectBtn from "@/pages/visual/_components/visualListSelectBtn.vue";
	import testBallMarkData from "@/common/test_ball.js"

	export default {
		computed: {
			...mapState(["userInfo", "selectInfo"]),

			getCount() {
				return this.tableContentData.length;
			},
		},

		components: {
			rootWithStateBarLayout,
			drawingBasicFun,
			hqsPopup,
			screenContent,
			vTable,
			visualListSelectBtn,
		},

		data() {
			return {
				currentTimeStr: "--:--",
				selectTableData: null,
				tableHeight: 0,

				tableHeadData: selectData.tableHead,
				tableContentData: selectData.tableData,
				tableOrignData: [],
				toolDataList: selectData.toolEntry,

				toolBarBgColor: "#00C000",
				toolTableShowState: 0, // 0 全部列表  1 有计划状态

				showDrawLay: false,
				showDrawBallData: testBallMarkData,

				thisPltName: '',
				thisMacType: 0,

				selectSvgData: {
					svgSourcePath: "",
					svgSourceUrl: "",
				},
			};
		},

		onLoad(opt) {
			console.log("onLoad(e)")
			console.log(opt);
			this.thisPltName = opt.plt_name;
			this.thisMacType = opt.macType;

			let _self = this;
			this.tableHeadData.forEach(e => {
				e.title = _self.$t(e.label + "");
			})
		},

		onReady() {
			let _this = this;
			this.intervalImpl = setInterval(function() {
				_this.currentTimeStr = dateUtil.getDate(Date.parse(new Date()), "minute");
			}, 1000);

			let view = uni.createSelectorQuery().in(this).select(".user-lay");
			view.fields({
				size: true, //是否返回节点尺寸（width height）
				rect: true, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
				scrollOffset: true, //是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
			}, (res) => {
				_this.tableHeight = (uni.getSystemInfoSync().windowHeight - res.bottom - 10);
			}).exec();

			this.requireVisualListDataApi(this.thisMacType, this.thisPltName);
		},

		onHide() {
			this.showDrawLay = false;
		},

		beforeDestroy() {
			clearInterval(this.intervalImpl);
		},

		methods: {
			onTabSelect(e) {
				this.showDrawLay = true;
				this.selectTableData = e.data[0];
			},

			onTableSelect(e) {
				console.log("onTableSelect");
				console.log(e);
				this.selectTableData = e.new.item;
				getApp().globalData.selectListItemData = this.selectTableData;

				this.requireMarkupBallDataApi(this.selectTableData.dmg_code);
				// return;
				let _self = this;
				genLocalDrawPath(this.selectTableData.drw_pass, this.selectTableData.plt_path).then(e => {
					console.log("onTableSelect  genLocalDrawPath");
					console.log(e);
					_self.showDrawLay = true;
					_self.selectSvgData.svgSourcePath = e;
					_self.selectSvgData.svgSourceUrl = e;
				});
			},

			onToolItemClick(e) {
				if (e == "screen") {
					let _self = this;
					this.toolTableShowState = Math.abs(this.toolTableShowState - 1);
					this.toolDataList[0].forEach(e => {
						if (e.type == "screen")
							e.image = _self.toolTableShowState == 1 ?
							"/static/imgs/tools/icon_menu_screening_unnor@2x.png" :
							"/static/imgs/tools/icon_menu_screening@2x.png";
					})

					this.screenTableShowState();
				} else if (e == "setting") {

				} else if (e == "enter") {
					this.showDrawLay = false;
					if (this.selectTableData == null) {
						uni.showToast({
							title: "请选择一个条目",
							icon: "none"
						})
						return;
					}

					let tempUrl = "/pages/visual/visualShow?";
					tempUrl += ""
					uni.navigateTo({
						url: tempUrl
					})
				} else if (e == "home") {
					uni.navigateBack();
				}
			},

			requireVisualListDataApi(inMacType, inPltName, isPlan) {
				requireVisualListData(inMacType, inPltName, isPlan).then(e => {
					for (let i = 0; i < e.length; i++) {
						e[i].mac_type_str = this.$t(`public.macTypeStr[${e[i].mac_type}]`);
						e[i].index = i + 1;
						e[i].loc_cls = 0;

						e[i].planSign = genVisualListPlanState(e[i]);

						e[i].photoSign = e[i].has_photo == 1 ? '●' : '';
						e[i].attachSign = e[i].has_file == 1 ? '●' : '';
						e[i].checkSign = getApp().globalData.ispRstPickerArray[e[i].isp_rst_type].cod_name;
						e[i].backgroundColor = getApp().globalData.ispRstPickerArray[e[i].isp_rst_type].cod_abrv
							.replace("0x", "#");
						// console.log("requireVisualListDataApi - cod_abrv - " + e[i].cod_abrv)
						// console.log("requireVisualListDataApi - backgroundColor - " + e[i].backgroundColor)
					}
					this.tableOrignData = e;
					// this.tableContentData = e;
					this.screenTableShowState();
				})
			},

			requireMarkupBallDataApi(inDmgCode) {
				console.log("requireMarkupBallDataApi - inDmgCode = " + inDmgCode);
				requireMarkupBallData(inDmgCode).then(originData => {
					console.log(originData);
					let reList = [];
					for (let i = 0; i < originData.length; i++) {
						let originItem = originData[i];
						let reListLength = reList.length;
						let reListLastItem = reListLength > 0 ? reList[reListLength - 1] : null;

						// 新建一个球标组 球标数组为空 新位置节点与原球标组pos_no不同 										
						if (reListLength == 0 ||
							reListLastItem.pos_no != originItem.pos_no ||
							(reListLastItem.pos_no == originItem.pos_no &&
								reListLastItem.bln_kbn != originItem.bln_kbn)) {

							let ballTemp = {};
							ballTemp.sId = originItem.pos_no;
							ballTemp.shapeType = Number(originItem.bln_type) + 12;
							ballTemp.showType = "trans";
							ballTemp.showID = originItem.pos_no;
							ballTemp.lineColor = "#0000ff";
							ballTemp.lineWidth = "5";
							ballTemp.fontSize = originItem.bln_fntsiz;
							ballTemp.fontName = originItem.bln_fntnam;
							ballTemp.lineStyle = "0";
							ballTemp.points = [];
							ballTemp.bln_kbn = originItem.bln_kbn;
							ballTemp.pos_no = originItem.pos_no;

							ballTemp.points.push({
								bln_x: originItem.bln_x,
								bln_y: originItem.bln_y,
								x: originItem.bln_x,
								y: originItem.bln_y,
							})

							reList.push(ballTemp);
						} else {
							reListLastItem.points.push({
								bln_x: originItem.bln_x,
								bln_y: originItem.bln_y,
								x: originItem.bln_x,
								y: originItem.bln_y,
							})
						}
					}

					console.log(reList)
					this.showDrawBallData = reList;
				})
			},

			screenTableShowState() {
				if (this.toolTableShowState == 0) {
					this.tableContentData = [];
					this.tableOrignData.forEach(e => {
						this.tableContentData.push(e);
					})
				} else {
					this.tableContentData = [];
					this.tableOrignData.forEach(e => {
						if (!e.wrk_cls_code) {

						} else if (e.wrk_cls_code >= 0)
							this.tableContentData.push(e);
					})
				}
				this.updateBySelectScreen();
			},

			updateBySelectScreen() {
				console.log("--------- updateBySelectScreen ----------");
				let tempUnselectList = getApp().globalData.thickIndexScreenUnselectList;
				let _self = this;
				for (let i = 0; i < this.tableContentData.length; i++) {
					if (tempUnselectList.includes(this.tableContentData[i].mac_numb)) {
						_self.tableContentData.splice(i, 1);
						i--;
						continue;
					}
					this.tableContentData[i].index = i + 1;
				}
			}

		},
	};
</script>

<style lang="scss">
	.rowClassName {
		font-size: 14rpx;
		color: #666666;
	}

	.content-lay {
		// background: #fff;
		width: 100%;
	}

	.header {
		background-color: #fff;
		box-sizing: border-box;
		padding: 12rpx;
		align-items: center;
		justify-content: space-between;


		.header-time {
			box-sizing: border-box;
			padding: 0rpx 9rpx;
			font-size: 25rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #00FF00;
			background-color: #000000;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.header-name-lay {
			width: 241rpx;
			height: 32rpx;
			background: #FFFFFF;
			border-radius: 1upx;
			border: 1px solid #CFD3D5;
			padding: 0 9upx;
			box-sizing: border-box;
			align-items: center;

			.header-name {
				font-size: 14rpx;
				color: #333333;
				font-weight: 400;
			}
		}

		.header-name-lay-disabled {
			background: #F6F6F6;
		}

		.header-indexs {
			margin-left: 9rpx;
			align-items: center;

			.header-index-tip {
				font-size: 14rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1F2329;
			}
		}

		.header-count {
			font-size: 14rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1F2329;
			margin-left: 9upx;
			display: flex;
			align-items: center;
		}
	}

	.main-content-lay {
		width: 100%;
		height: 100%;
		background-color: #F6F6F6;
		padding: 12rpx;
		box-sizing: border-box;
	}

	.user-lay {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 15rpx;
		background-color: #fff;
		align-items: center;
		// margin: 10upx;
		// padding: 10upx 15upx;
		justify-content: space-between;

		.user-person {
			font-size: 12rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 400;
			color: #1F2329;
		}

		.user-btn {
			box-sizing: border-box;
			font-size: 14rpx;
			padding: 8rpx 15rpx;
			// height: 25upx;
			color: #0062B0;
			background: #FFFFFF;
			font-weight: 500;
			border-radius: 1upx;
			border: 1px solid #0062B0;
		}
	}

	.table-lay {
		width: 100%;

		.data-table {
			// width: calc(100% - 20upx);
			height: 100%;
			padding: 0 10px;
			box-sizing: border-box;
			// background-color: #F0AD4E;
		}
	}

	.drawingShowLay {
		position: absolute;
		box-sizing: border-box;
		width: 50vw;
		z-index: 100;
		bottom: 10px;
		right: var(--page-right-toolbar-width);
		background-color: #D8D9D9;
		padding: 5px;

		box-shadow: 0px 2px 47px 0px rgba(0, 0, 0, 0.1);
		border: 0px solid #D8D9D9;
	}
</style>
